<template>
  <div class="index">
    <div class="logo"></div>
    <div class="logo2"></div>
  </div>
</template>

<script>
export default {
  created() {
    try {
      let context = new window.AudioContext()
      const url = "https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/music/logo.mp3"
      var xhr = new XMLHttpRequest() //通过XHR下载音频文件
      xhr.open('GET', url, true)
      xhr.responseType = 'arraybuffer'
      const that = this
      xhr.onload = function () { //下载完成
        const bu = this.response
        context.decodeAudioData(bu, function (audioBuffer) { //解码成功时的回调函数
          const source = context.createBufferSource()
          source.buffer = audioBuffer
          source.connect(context.destination)
          source.start(0) //立即播放
          setTimeout(() => {
            that.logoEnd()
          }, 3200)
        })
      }
      xhr.send()
    }
    catch (error) {
      setTimeout(() => {
        this.logoEnd()
      }, 3000)
    }
  },
  methods: {
    logoEnd: function () {
      this.$parent.$parent.isload()
    }
  }
}
</script>

<style scoped lang='stylus'>
.index
  position absolute
  width 100%
  height 100%
  z-index 99
  background url($urlTitle + 'personals/背景.png') 0 0 / 100% 100%
  .logo
    position absolute
    $center('WHLT', 15rem, 11rem)
    background url($urlTitle + 'index/绘本侠形象.png') 0 0 / 100% 100%
    margin-top -9rem
    transform translateX(-1000px)
    animation logoAnimation 3.5s
    animation-delay 0.8s
    animation-fill-mode forwards
  .logo2
    position absolute
    $center('WHLT', 10rem, 4rem)
    background url($urlTitle + 'index/绘本侠文字.png') 0 0 / 100% 100%
    margin-top 3rem
    animation logo2Animation 1s
    animation-fill-mode forwards
    opacity 0
@keyframes logo2Animation
  0%
    opacity 0
    transform translateY(200px)
  100%
    opacity 1
    transform translateY(0px)
@keyframes logoAnimation
  0%
    transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1)
  2.92%
    transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -135.218, 0, 0, 1)
  3.37%
    transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -114.871, 0, 0, 1)
  3.47%
    transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -110.596, 0, 0, 1)
  4.58%
    transform matrix3d(1.061, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -68.65, 0, 0, 1)
  5.69%
    transform matrix3d(1.321, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -36.551, 0, 0, 1)
  5.76%
    transform matrix3d(1.32, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -34.768, 0, 0, 1)
  7.41%
    transform matrix3d(1.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.804, 0, 0, 1)
  7.51%
    transform matrix3d(1.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.454, 0, 0, 1)
  7.88%
    transform matrix3d(1.771, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 2.008, 0, 0, 1)
  8.68%
    transform matrix3d(1.408, 0, 0, 0, 0, 1.181, 0, 0, 0, 0, 1, 0, 9.646, 0, 0, 1)
  10.03%
    transform matrix3d(0.982, 0, 0, 0, 0, 1.333, 0, 0, 0, 0, 1, 0, 16.853, 0, 0, 1)
  10.85%
    transform matrix3d(0.822, 0, 0, 0, 0, 1.398, 0, 0, 0, 0, 1, 0, 18.613, 0, 0, 1)
  11.53%
    transform matrix3d(0.732, 0, 0, 0, 0, 1.439, 0, 0, 0, 0, 1, 0, 18.992, 0, 0, 1)
  12.22%
    transform matrix3d(0.672, 0, 0, 0, 0, 1.469, 0, 0, 0, 0, 1, 0, 18.618, 0, 0, 1)
  14.18%
    transform matrix3d(0.612, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 15.054, 0, 0, 1)
  14.37%
    transform matrix3d(0.612, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 14.604, 0, 0, 1)
  19.23%
    transform matrix3d(0.737, 0, 0, 0, 0, 1.371, 0, 0, 0, 0, 1, 0, 3.855, 0, 0, 1)
  20.01%
    transform matrix3d(0.763, 0, 0, 0, 0, 1.338, 0, 0, 0, 0, 1, 0, 2.724, 0, 0, 1)
  23.05%
    transform matrix3d(0.856, 0, 0, 0, 0, 1.211, 0, 0, 0, 0, 1, 0, 0.036, 0, 0, 1)
  25.75%
    transform matrix3d(0.923, 0, 0, 0, 0, 1.114, 0, 0, 0, 0, 1, 0, -0.709, 0, 0, 1)
  26.94%
    transform matrix3d(0.947, 0, 0, 0, 0, 1.078, 0, 0, 0, 0, 1, 0, -0.76, 0, 0, 1)
  31.58%
    transform matrix3d(1.009, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, -0.406, 0, 0, 1)
  31.73%
    transform matrix3d(1.01, 0, 0, 0, 0, 0.986, 0, 0, 0, 0, 1, 0, -0.392, 0, 0, 1)
  37.32%
    transform matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.03, 0, 0, 1)
  38.15%
    transform matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.008, 0, 0, 1)
  42.35%
    transform matrix3d(1.022, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0.03, 0, 0, 1)
  48.9%
    transform matrix3d(1.007, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0.009, 0, 0, 1)
  57.77%
    transform matrix3d(0.998, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1)
  60.47%
    transform matrix3d(0.998, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1)
  69.36%
    transform matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  83.61%
    transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
  100%
    transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
</style>
